iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

網頁排版個人學習筆記系列 第 8

HTML&CSS-解決選單hover加底線效果,背景跳動問題

  • 分享至 

  • xImage
  •  

前言

初期單純做選單練習未加入下方banner前,由於header區塊是白色,加入hover 下底線效果,後知後覺如我也無察覺異狀。
直到繳交最終作業測試選單hover效果時發現,尬~~ 背景會彈跳是花黑噴!!!趕緊請教助教。
再鬼打牆時,有人可以指引光明之路真的是心存萬分感激阿XD
/
最下方留了之前與助教的對話,方便之後查閱! :)


選單hover加底線效果,背景跳動問題示意圖
| 解決方法 | 範例
只要在a連結處先產生hover時會出現的下底線寬度→ 顏色設定透明transparent。
因有預留空間,所以當滑鼠移入a選單就不會因為空間差而產生跳動問題

/*a這邊先預留 a:hover會產生的空間顏色設定透明*/
a{
    border-bottom:3px solid transparent;
}
/*hover後加上要顯示的顏色即可*/
a:hover{
  border-bottom:3px solid red;
}

|與助教的 Q&A|

『我的提問』

選單中a:hover 呈現底線效果,滑鼠滑入選單時後方.header的背景都會往下延伸,移開後又會恢復原高度。
目前測試之後有兩個方法可以讓滑鼠滑入&滑出出時.header背景不會彈來彈去:原始碼

  1. 設定.menu高度
  2. 把原先a設定的display:block;拿掉

『助教回覆』

  1. 設定.menu 高度,這個方法是可以的,但如果連結的大小改變的,那可能會造成跑版,比較不彈性
  2. 把原先 a 設定的 display:block; 拿掉,這樣外層就不會因為 a 而撐開,也無法調整 a 的寬度,也是比較沒有彈性

    這邊建議 a 可以設定成 display:block; 或是 display:inline-block;,讓它自動把外層給撐開,點擊面積也會比較大,假如會因為 hover 的關係連結本身大小而導致背景會跳動,那可以先把例如 border-bottom 預設為 transparent (透明),hover 後再寫上顏色,這樣就不會改變大小,而導致背景跳動了
    這邊寫一個簡單範例給你參考。
    a 的點擊面積大可以讓使用者體驗更好,也會自動把外層給撐開,連結也可以寫上寬度,border-bottom 先寫成 transparent,這樣可以讓調整上更加彈性

上一篇
HTML&CSS|版面使用float也清除浮動卻清不乾淨?
下一篇
HTML&CSS|position 屬性
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言